import React, { useMemo } from 'react'
import style from './Index.module.less'

function Main ({ data }) {
  const list = useMemo(() => {
    if (data && data.top_case_count instanceof Array) {
      return data.top_case_count.slice(0, 5)
    }
    return []
  }, [data])
  return (
    <div className={style.container}>
      <div className={style.header}>仲裁案件数量排行</div>
      <div className={style.body}>
        <div className={style.title}>
          <div className={style.one}>排名</div>
          <div className={style.two}>名称</div>
          <div className={style.three}>案件数</div>
        </div>
        {
          list.map((li, i) => {
            return (
              <div className={style.item} key={i}>
                <div className={style.one}>{i + 1}</div>
                <div className={style.two}>
                  <div className={style['two-inner']}>{li.name}</div>
                </div>
                <div className={style.three}>{li.arbitrator_num}</div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default Main
